<!--
 * @Author: 郑灶欣
 * @Date: 2023-02-24 13:30:23
 * @LastEditors: 郑灶欣
 * @LastEditTime: 2023-02-27 10:01:59
 * @FilePath: \office\src\components\bottom.vue
 * @Description: 
-->
<template>
  <div class="bg">
    <select @change="changeLanguage($event)">
      <option value="zh_j" :selected="locale=='zh_j'">简体中文</option>
      <option value="zh_f" :selected="locale=='zh_f'">繁体中文</option>
      <option value="zh_f" :selected="locale=='en'">English</option>
    </select>
  </div>
</template>
<script lang="ts" setup>
//语言切换
import { useI18n } from "vue-i18n";
import { reactive, onMounted } from "vue";
let locale = reactive(useI18n().locale);
/* 判断当前浏览器环境 */
onMounted(() => {
  if (navigator.language.indexOf("zh-") >= 0) {
    if (navigator.language == "zh-CN") {//简体中文
      changeLanguage({ e: { target: { value: "zh_j" } } });
    } else {//繁体
      changeLanguage({ e: { target: { value: "zh_f" } } });
    }
  } else {//英文
    changeLanguage({ e: { target: { value: "en" } } });
  }
});

function changeLanguage(e: Object) {
  locale.value = e.target.value;
}
</script>
<style lang="scss" scoped>
.bg {
  background-color: $bg-color;
  padding: 30px;
}
select {
  background: transparent;
  width: 170px;
  height: 30px;
  color: $white-color;
  border-color: $white-color;
  padding: 0 10px;
}
select:hover {
  border-color: $white-color;
}
option {
  background: #fff;
  color: #000;
  width: 170px;
  height: 30px;
}
</style>